<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>默认的图片节点</title>
</head>
<body>
  <div id="mountNode"></div>
  <script src="../build/g6.js"></script>
  <script>

    const data = {
      nodes: [
        {
          id: 'triangle',
          label: '主题 ModelRect Title',
          description: '这里是一顿描述信息，不知道长短',
          x: 150,
          y: 100
        }
      ]
    }

    const graph = new G6.Graph({
      container: 'mountNode',
      width: 800,
      height: 600,
      defaultNode: {
        shape: 'diamond',
        size: [200, 80],
        style: {
          fill: '#bae637',
          stroke: '#eaff8f',
          lineWidth: 5
        },
        labelCfg: {
          style: {
            fill: '#9254de',
            fontSize: 18
          }
        },
        linkPoints: {
          top: true,
          bottom: true,
          left: true,
          right: true,
          size: 5,
          fill: '#fff'
        }
      },
      nodeStateStyles: {
        hover: {
          fill: '#d3adf7'
        }
      },
      modes: {
        default: ['drag-canvas']
      }
    })

    graph.data(data)
    graph.render()

    graph.on('node:click', evt => {
      const { item } = evt
      graph.setItemState(item, 'select', true)
      
      graph.updateItem(item, {
        size: [ 160, 130],
        style: {
          fill: '#b5f5ec'
        },
        preRect: {
          fill: '#ff4d4f'
        },
        linkPoints: {
          fill: '#fff',
          size: 5
        },
        stateIcon: {
          img: 'https://gw.alipayobjects.com/zos/basement_prod/c781088a-c635-452a-940c-0173663456d4.svg'
        }
      })
    })

    graph.on('node:mouseenter', evt => {
      const { item } = evt
      graph.setItemState(item, 'hover', true)
    })

    graph.on('node:mouseleave', evt => {
      const { item } = evt
      graph.setItemState(item, 'hover', false)
    })
  </script>
</body>
</html>